<template>
    <div class="con">
        <img src="../assets/images/logo.png" alt="" class="logo" onclick="return false">

        <div class="box1">
            <img src="../assets/images/pic_Account_ID.png" alt="" onclick="return false">
            <input type="text" class="admin" v-model="username">
            <img src="../assets/images/pic_PW.png" alt="" onclick="return false">
            <input type="password" name="" id="" class="pwd" v-model="password">
        </div> 
        
        <img src="../assets/images/btn_login.png" alt="" class="login" @click.prevent="login">
    
    </div>
</template>

<script>
export default {
    name: "gift",
    data() {
        return {
            username: "",
            password: ""
        };
    },
    beforeCreate() {
        document.getElementsByTagName("body")[0].className = "bg_MyPoints";
    },
    methods: {
        login() {
            if (this.username == "") {
                alert("请输入账号");
            } else if (this.password == "") {
                alert("请输入密码");
            } else {
                var qs = require("qs");
                this.axios({
                    method: "post",
                    url: `${this.siteUrl}/piaowu/api/staff_login`,
                    data: qs.stringify({
                        member_id: $.cookie("osc_member_id"),
                        token: $.cookie("osc_member_token"),
                        username: this.username,
                        password: this.password
                    })
                })
                    .then(response => {
                        if (response.data.status == 1) {
                            alert("登录成功");
                            localStorage.setItem(
                                "staff_id",
                                response.data.data.staff_id
                            );
                            localStorage.setItem(
                                "staff_token",
                                response.data.data.staff_token
                            );
                            this.$router.push({ name: "admin" });
                        } else {
                            alert(response.data.msg);
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
            }
        }
    },
    mounted: function() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
    position: relative;
}
.con img {
    width: 100%;
}
.con .logo {
    width: 34%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 30%);
}

.con .box1 {
    padding-top: 30%;
}

.con .admin {
    position: absolute;
    left: 40%;
    top: 48%;
    height: 22px;
    border: 1px solid #000;
}
.con .pwd {
    position: absolute;
    left: 40%;
    bottom: 13%;
    height: 22px;
    border: 1px solid #000;
}
.con .login {
    width: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
}
</style>
